<template>
    <div class="counter">
        <div @click="add(-1)" style="background-color: gray;font-weight: bold;float: left;width: 15px" class="box">
            -
        </div>
        <div style="float: left;width: 25px;background-color: white" class="box">
            {{count}}
        </div>
        <div @click="add(1)" style="background-color: gray;font-weight: bold;float: left;width: 15px;margin-right: 6px;" class="box">
            +
        </div>
    </div>
</template>

<script>
    import bus from '@/components/eventBus.js';
    export default {
        name: "Counter",
        props:{
          count: {
              type: Number,
              required: true
          },
          id:{
              type: String,
              required: true
          }

        },
        methods:{
            add(val){
                if (this.count+val===0){
                    return;
                }
                bus.$emit("addCount",this.id,val);
            }
        }
    }
</script>

<style scoped>
    .counter{
        /*background-color: #c9e2b3;*/
        float: right;
    }
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
